<style lang="scss">
.page-grid-row {
  zw-col:nth-child(odd) {
    background: #3ba2f4;
  }

  zw-col {
    padding: 20px;
    color: #fff;
    background: #42b983;
  }
}
</style>


<template>
  <div class="page-grid-row">
    <z-space vertical>
      <h3>栅格row、col</h3>
      <p>现在支持栅格系统，基于grid布局</p>
      <p>24栅格系统。把水平方向行xy-row平均分为24份，然后指定每一列xy-col的跨越范围span</p>
<div>
  <zw-row gutter="10">
    <zw-col span="12">col-12</zw-col>
    <zw-col span="12">col-12</zw-col>
    <zw-col span="4">col-4</zw-col>
    <zw-col span="8">col-8</zw-col>
    <zw-col span="8">col-8</zw-col>
    <zw-col span="4">col-4</zw-col>
    <zw-col span="8">col-8</zw-col>
    <zw-col span="8">col-8</zw-col>
    <zw-col span="8">col-8</zw-col>
  </zw-row>
</div>

<vue-code-mirror :tpl="def.d1"></vue-code-mirror>

      <p>支持设置row column gutter</p>

      <div>
        <zw-row gutter="3vw" row-gutter="1vh">
          <zw-col span="12">col-12</zw-col>
          <zw-col span="12">col-12</zw-col>
          <zw-col span="4">col-4</zw-col>
          <zw-col span="8">col-8</zw-col>
          <zw-col span="8">col-8</zw-col>
          <zw-col span="4">col-4</zw-col>
          <zw-col span="8">col-8</zw-col>
          <zw-col span="8">col-8</zw-col>
          <zw-col span="8">col-8</zw-col>
        </zw-row>
      </div>

      <vue-code-mirror :tpl="def.d2"></vue-code-mirror>

    </z-space>
  </div>
</template>


<script>
import VueCodeMirror from "@example/components/VueCodeMirror";
export default  {
  components: {VueCodeMirror},
  data() {
    return {
      def: {
        d1:
            `
<zw-row gutter="10">
  <zw-col span="12">col-12</zw-col>
  <zw-col span="12">col-12</zw-col>
  <zw-col span="4">col-4</zw-col>
  <zw-col span="8">col-8</zw-col>
  <zw-col span="8">col-8</zw-col>
  <zw-col span="4">col-4</zw-col>
  <zw-col span="8">col-8</zw-col>
  <zw-col span="8">col-8</zw-col>
  <zw-col span="8">col-8</zw-col>
</zw-row>
`,
        d2:
`
<zw-row gutter="3vw" row-gutter="1vh">
  <zw-col span="12">col-12</zw-col>
  <zw-col span="12">col-12</zw-col>
  <zw-col span="4">col-4</zw-col>
  <zw-col span="8">col-8</zw-col>
  <zw-col span="8">col-8</zw-col>
  <zw-col span="4">col-4</zw-col>
  <zw-col span="8">col-8</zw-col>
  <zw-col span="8">col-8</zw-col>
  <zw-col span="8">col-8</zw-col>
</zw-row>
`
      }
    }
  }
}
</script>
